<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
</head>

<body>
	<!--
			
			假设现在从后台接受了一段关于访客的信息数据(添加新的访客信息从info里面按照顺序拿取),请实现问题一.gif的效果.
			
		-->
	<button class="add">添加一条新的访客信息</button>
	<button class="del">删除选中</button>
	<button class="sort">从小到大</button>
	<button class="allSelect">全选功能</button>

	<button class="reverse">反选</button>

	<table border="1" cellspacing="0" cellpadding="20">
		<tr>
			<th>序列号</th>
			<th>姓名</th>
			<th>年龄</th>
			<th>操作</th>
			<th>选择</th>
		</tr>
	</table>
	<script type="text/javascript">
		var info = [{
			name: "胡杭",
			age: 16
		},
		{
			name: "胜明",

			age: 22
		},
		{
			name: "军毅",
			age: 21
		},
		{
			name: "晓华",
			age: 13
		},
		{
			name: "盛聪",
			age: 23
		},
		{
			name: "侦剑",
			age: 32
		},
		{
			name: "红翔",
			age: 25
		},
		{
			name: "超维",
			age: 18
		},
		{
			name: "士琪",
			age: 22
		},
		{
			name: "艳华",
			age: 20
		}
		];

		let addBtn = document.querySelector(".add");
		let delBtn = document.querySelector(".del");
		let sortBtn = document.querySelector(".sort");
		let allSelectBtn = document.querySelector(".allSelect");
		let reverseBtn = document.querySelector(".reverse");
		let table = document.querySelector("table");
		let ul = document.querySelectorAll("ul");

		addBtn.addEventListener("click", function () {
			let newTr = document.createElement("tr");
			let addCount = info.length++ % 10 + 1 + "";
			newTr.innerHTML = "<td>" + addCount.padStart(2, "0") + "</td>" + "<td>" + info[addCount - 1].name + "</td>" + "<td>" + info[addCount - 1].age + "</td>" + "<td>" + "<button>删除</button>" + "</td>" + "<td>" + "<input  type=checkbox>" + "</td>";
			newTr.classList.add = "check";
			table.appendChild(newTr);
		})

		delBtn.addEventListener("click", function () {
	
			 let newTr = document.createElement("info");
			 table.removeChild(table.firstElementChild);
		})


	</script>
</body>

</html>